<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>员工详情</title>
    <script src="https://unpkg.com/vue@next"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>
        .sold {
            border: solid 1px;
            width: 100%;
        }
        
        .center {
            text-align: center;
        }
        
        .dbc {
            display: block;
            margin: 10px auto;
        }
        
        th {
            border: solid 1px;
        }
        
        td {
            border: solid 1px;
        }
        
        caption {
            font-size: large;
            font-weight: bold;
        }
    </style>
</head>

<body>
    <div id="app">
        <table class="sold center">
            <caption>员工信息</caption>
            <th>员工 id</th>
            <th>部门 id</th>
            <th>员工姓名</th>
            <th>员工生日</th>
            <th>员工性别</th>
            <th>员工工资</th>
            <th>操作</th>
            <tr v-for="emp in emps">
                <td>{{emp.id}}</td>
                <td>{{emp.deptId}}</td>
                <td>{{emp.name}}</td>
                <td>{{emp.birth}}</td>
                <td>{{emp.sex}}</td>
                <td>{{emp.salary}}</td>
                <td>
                    <a :href='"edit.html?id=" + emp.id'>编辑</a> &nbsp;
                    <a @click='delEmp(emp.id)' :href='"#" + emp.id'>删除</a>
                </td>
            </tr>
        </table>
        <input type="button" value="添加用户" class="center dbc" @click='addEmp'>
    </div>
    <script>
        const App = {
            data() {
                return {
                    emps: null,
                    deptId: null,
                }
            },
            methods: {
                addEmp() {
                    window.location = "add.html?id=" + this.deptId;
                },
                delEmp(id) {
                    axios.get('http://127.0.0.1:8080/Test/del?type=emp&id=' + id).then(({
                        data
                    }) => {
                        console.log(data);
                        if (data.code != 200) {
                            alert(' 出现错误, code ' + data.code);
                        } else {
                            window.location = "emp.html?id=" + this.deptId;
                        }
                    }).catch(function(error) {
                        console.log(error);
                        alert('连接服务器失败! ');
                    });
                }
            },
            created() {
                this.deptId = getQueryVariable('id');
                axios.get('http://127.0.0.1:8080/Test/emp?did=' + this.deptId).then(({
                    data
                }) => {
                    console.log(data);
                    if (data.code != 200) {
                        alert(' 出现错误, code ' + data.code);
                    } else {
                        this.emps = data.data;
                    }
                }).catch(function(error) {
                    console.log(error);
                    alert('连接服务器失败! ');
                });
            }
        }

        Vue.createApp(App).mount('#app ')

        function getQueryVariable(variable) {
            var query = window.location.search.substring(1);
            var vars = query.split("&");
            for (var i = 0; i < vars.length; i++) {
                var pair = vars[i].split("=");
                if (pair[0] == variable) {
                    return pair[1];
                }
            }
            return (false);
        }
    </script>
</body>

</html>